<template>
  <div class="">
    <div class="content flex_c">
      <div class="contenta">
        <div class="contenta_left">
          <img src="@/assets/login/bga.png" alt="" />
        </div>
        <div class="contenta_right">
          <div>
            <img class="logo_img" src="@/assets/login/logo.png" alt="" />
          </div>

          <div class="title">欢迎登录世界航商后台管理系统</div>

          <div class="login">
            <el-form
              :model="loginForm"
              :rules="rules"
              ref="ruleForm"
              label-width="0"
              class="demo-ruleForm"
            >
              <el-form-item prop="username">
                <div class="logina flex_x">
                  <img class="login_img" src="@/assets/login/user.png" alt="" />
                  <div class="inputa flex1">
                    <el-input
                      clearable
                      v-model="loginForm.username"
                      placeholder="请输入账号"
                    ></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div class="logina loginb flex_x">
                  <img class="login_img" src="@/assets/login/pas.png" alt="" />
                  <div class="inputa flex1">
                    <el-input
                      clearable
                      show-password
                      v-model="loginForm.password"
                      placeholder="请输入密码"
                    ></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div
                  class="btn cf fs14 fw500 flex_c cp"
                  @click="login('ruleForm')"
                >
                  登录
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    login(ruleForm) {
      //登录
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // console.log("通过");
          this.$api
            .login({
              username: this.loginForm.username,
              password: this.$md5(this.loginForm.password),
            })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("登录成功");
                this.$cookies.set("token", res.data.token, { expires: "7D" });
                this.$cookies.set("user", JSON.stringify(res.data));
                this.getNavMenu();
              } else {
                this.$message.error(res.message);
              }
            });
        }
      });
    },
    getNavMenu() {
      //获取用户权限
      this.$api.getNavMenu().then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            if (item.children.length == 0) {
              delete item.children;
            }
          });

          this.$store.commit("setMenu",res.data);
          this.$router.push("/");
        }
      });
    },
  },

  created() {},

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
.content {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/login/bg.png");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  .contenta {
    width: 1100px;
    height: 698px;
    background: #ffffff;
    border-radius: 24px 24px 24px 24px;
    overflow: hidden;
    display: flex;
    .contenta_left {
      width: 649px;
      height: 100%;
      background: #8aadff;
    }
    .contenta_left > img {
      width: 100%;
      height: 100%;
    }
    .contenta_right {
      padding: 89px 55px;
      .logo_img {
        width: 155px;
        height: 55px;
      }
      .title {
        font-size: 24px;
        font-family: Roboto-SemiBold, Roboto;
        font-weight: 600;
        color: #012c8c;
        margin-top: 40px;
      }
      .login {
        margin-top: 100px;
        .logina {
          padding-bottom: 8px;
          border-bottom: 1px solid #012c8c;

          .login_img {
            width: 20px;
            height: 20px;
          }
        }
        .loginb {
          margin-top: 36px;
        }
      }

      .btn {
        margin-top: 60px;
        width: 340px;
        height: 43px;
        background: #012c8c;
        border-radius: 37px 37px 37px 37px;
      }
    }
  }
}
.inputa {
  &::v-deep .el-input__inner {
    border: none;
  }
}
</style>

